<template>
  <div>
    <!--顶部导航栏-->
    <van-nav-bar
        title="个人设置"
        left-text="返回"
        right-text="保存"
        left-arrow
        @click-left="backBtn"
        @click-right="saveBtn"
    />
    <!--用户信息-->
    <van-form>
      <!--用户名-->
      <van-field
          readonly
          v-model="user.username"
          name="用户名"
          label="用户名"
      />
      <!--年龄-->
      <van-field
          v-model="user.age"
          type="number"
          name="asyncValidator"
          label="年龄"
          placeholder="年龄"
          :rules="[{ validator: asyncValidator, message: '请输入正确年龄' }]"
      />
      <!--邮箱-->
      <van-field
          v-model="user.email"
          type="email"
          name="validator"
          label="邮箱"
          placeholder="邮箱"
          :rules="[{ validator, message: '请输入正确邮箱' }]"
      />
      <!--性别-->
      <van-field
          is-link
          readonly
          clickable
          v-model="user.gender"
          type="text"
          name="picker"
          label="性别"
          placeholder="性别"
          :rules="[{ required: true, message: '请填写性别' }]"
          @click="showSexPicker = true"
      />
      <van-popup v-model="showSexPicker" position="bottom">
        <van-picker
            show-toolbar
            :columns="sexColumns"
            @confirm="onSexConfirm"
            @cancel="showSexPicker = false"
        />
      </van-popup>
      <!--爱好-->
      <van-field
          v-model="user.hobby"
          type="text"
          name="爱好"
          label="爱好"
          placeholder="爱好"
          :rules="[{ required: true, message: '请填写爱好' }]"
      />
      <!--专业-->
      <van-field
          is-link
          readonly
          clickable
          v-model="user.majorName"
          type="text"
          name="picker"
          label="专业"
          placeholder="专业"
          @click="showMajorPop"
      />
      <van-popup v-model="showMajorPicker" position="bottom">
        <!--value-key 必须写 通过接口得到的数组数据渲染到选择器中-->
        <van-picker
            show-toolbar
            :columns="majorColumns"
            value-key="name"
            :loading="loading"
            :default-index="defaultMajorIndex"
            @confirm="onMajorConfirm"
            @cancel="showMajorPicker = false"
        />
      </van-popup>
      <!--地区-->
      <van-field
          is-link
          readonly
          clickable
          v-model="user.regionName"
          type="text"
          name="picker"
          label="地区"
          placeholder="地区"
          @click="showRegionPop"
      />
      <van-popup v-model="showRegionPicker" position="bottom">
        <!--value-key 必须写 通过接口得到的数组数据渲染到选择器中-->
        <van-picker
            show-toolbar
            :columns="regionColumns"
            value-key="name"
            :loading="loading"
            :default-index="defaultRegionIndex"
            @confirm="onRegionConfirm"
            @cancel="showRegionPicker = false"
        />
      </van-popup>
      <!--学校-->
      <van-field
          is-link
          readonly
          clickable
          v-model="user.universityName"
          type="text"
          name="picker"
          label="学校"
          placeholder="学校"
          @click="showUniversityPop"
      />
      <van-popup v-model="showUniversityPicker" position="bottom">
        <!--value-key 必须写 通过接口得到的数组数据渲染到选择器中-->
        <van-picker
            show-toolbar
            :columns="universityColumns"
            value-key="name"
            :loading="loading"
            :default-index="defaultUniversityIndex"
            @confirm="onUniversityConfirm"
            @cancel="showUniversityPicker = false"
        />
      </van-popup>
      <!--预期学科-->
      <van-field
          is-link
          readonly
          clickable
          v-model="user.expectDepartmentName"
          type="text"
          name="picker"
          label="预期学科"
          placeholder="预期学科"
          @click="showDepartmentPop"
      />
      <van-popup v-model="showDepartmentPicker" position="bottom">
        <!--value-key 必须写 通过接口得到的数组数据渲染到选择器中-->
        <van-picker
            show-toolbar
            :columns="departmentColumns"
            value-key="name"
            :loading="loading"
            :default-index="defaultDepartmentIndex"
            @confirm="onDepartmentConfirm"
            @cancel="showDepartmentPicker = false"
        />
      </van-popup>
    </van-form>
  </div>
</template>

<script>
import {Toast} from 'vant'

export default {
  name: "MineEdit",
  data() {
    return {
      loading: true,
      showSexPicker: false,
      showMajorPicker: false,
      showRegionPicker: false,
      showUniversityPicker: false,
      showDepartmentPicker:false,
      sexColumns: ['男', '女',],
      user: {},
      majorColumns: [],
      regionColumns:[],
      universityColumns:[],
      departmentColumns:[],
      defaultMajorIndex:2,
      defaultRegionIndex:2,
      defaultUniversityIndex:2,
      defaultDepartmentIndex:2
    }
  },
  methods: {
    //选择学科
    onDepartmentConfirm(value){
      this.user.expectDepartmentId = value.id
      this.user.expectDepartmentName = value.name
      this.showDepartmentPicker = false
    },
    //弹出选择学校的窗口
    showDepartmentPop(){
      this.showDepartmentPicker = true
      this.loading = false
      //选则默认指针 默认选则当前地区
      this.defaultDepartmentIndex = this.departmentColumns.indexOf(this.departmentColumns.filter(v => v.name === this.user.expectDepartmentName)[0])
    },

    //弹出选择学校的窗口
    showUniversityPop(){
      this.showUniversityPicker = true
      this.loading = false
      //选则默认指针 默认选则当前地区
      this.defaultUniversityIndex = this.universityColumns.indexOf(this.universityColumns.filter(v => v.name === this.user.universityName)[0])
    },
    //选择学校
    onUniversityConfirm(value){
      this.user.school = value.id
      this.user.universityName = value.name
      this.showUniversityPicker = false
    },
    //弹出选择地区的窗口
    showRegionPop(){
      this.showRegionPicker = true
      this.loading = false
      //选则默认指针 默认选则当前地区
      this.defaultRegionIndex = this.regionColumns.indexOf(this.regionColumns.filter(v => v.name === this.user.regionName)[0])
    },
    //选择地区
    onRegionConfirm(value){
      this.user.regionId = value.id
      this.user.regionName = value.name
      this.showRegionPicker = false
    },
    //弹出选择专业的窗口
    showMajorPop(){
      this.showMajorPicker = true
      this.loading = false
      //选则默认指针 默认选则当前专业
      this.defaultMajorIndex = this.majorColumns.indexOf(this.majorColumns.filter(v => v.name === this.user.majorName)[0])
    },
    //选择专业
    onMajorConfirm(value) {
      this.user.majorId = value.id
      this.user.majorName = value.name
      this.showMajorPicker = false
    },
    //选择性别
    onSexConfirm(value) {
      this.user.gender = value;
      this.showSexPicker = false;
    },
    //返回
    backBtn() {
      this.$router.push('/mine')
    },
    //保存
    saveBtn() {
      if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(this.user.email)){
        return
      }
      if (!/^(?:[1-9][0-9]?|1[01][0-9]|120)$/.test(this.user.age)){
        return
      }
      this.request.put('/api/user/edit',this.user).then(res => {
        if (res.code === 1){
          const token = JSON.parse(localStorage.getItem('user')).token
          this.user.token = token
          localStorage.setItem("user",JSON.stringify(this.user))
          Toast('保存成功');
          this.$router.push('/mine')
        }
      })
    },
    // 异步校验年龄
    asyncValidator(val) {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(/^(?:[1-9][0-9]?|1[01][0-9]|120)$/.test(val));
        }, 100);
      });
    },
    // 校验函数校验邮箱
    validator(val) {
      return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(val);
    }
  },
  created() {

    //查询学科列表
    this.request.get('/api/department/list').then(res => {
      if(res.code === 1){
        this.departmentColumns = res.data
      }
    })

    //查询学校列表
    this.request.get('/api/university/list').then(res => {
      if(res.code === 1){
        this.universityColumns = res.data
      }
    })

    //查询地区列表
    this.request.get('/api/region/list').then(res => {
      if(res.code === 1){
        this.regionColumns = res.data
      }
    })

    //根据id查询用户信息
    this.request.get('/api/user/selectForEdit',{
      params:{
        id:this.$route.query.id
      }
    }).then(res => {
      if(res.code === 1){
        this.user = res.data
      }
    })
    //查询专业列表
    this.request.get('/api/major/list').then(res => {
      if (res.code === 1) {
        this.majorColumns = res.data
      }
    })
  },
  beforeDestroy() {
  }
}
</script>

<style scoped>

</style>